<template>
    <div style="display: flex; align-items: center; justify-content: flex-end">
        <el-dropdown>
            <span style="font-size: 16px">
                {{ $t('切换语言') }}
                <el-icon><arrow-down /></el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="switchLanguage('en')">en</el-dropdown-item>
                    <el-dropdown-item @click="switchLanguage('zh')">zh</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-divider direction="vertical" />
        <el-dropdown @command="handlesetchannel">
            <span style="font-size: 16px">
                <el-icon size="20"><HomeFilled /></el-icon>
                {{ userstore.userinfo.channelnm }}
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="item in channellist" :command="item.id">
                        {{ item.name }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-divider direction="vertical" />
        <el-dropdown>
            <span style="font-size: 16px">
                <el-icon><UserFilled /></el-icon>{{ userstore.username }}
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="logout()"> {{ $t('退出登录') }}</el-dropdown-item>
                    <el-dropdown-item @click="changePassword()"> {{ $t('修改密码') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-divider direction="vertical" />
        <el-popover placement="bottom" title="标题" :width="200" trigger="click" content="这里是你的通知信息">
            <template #reference>
                <el-icon><BellFilled /></el-icon>
            </template>
        </el-popover>
        <el-divider direction="vertical" />
        <el-button style="margin-right: 20px" size="large" link>
            <el-icon size="30"><ElementPlus /></el-icon>v1.0
        </el-button>
    </div>
    <!-- 弹窗组件 -->
    <el-dialog  v-model="dialogVisible" :title="$t('修改密码')" width="400">
        <el-form v-loading="loading" :model="formdata" label-width="120">
            <el-form-item :label="$t('用户编号')">
                <el-input v-model="formdata.userid" readonly />
            </el-form-item>
            <el-form-item :label="$t('用户名称')">
                <el-input v-model="formdata.name" readonly />
            </el-form-item>
            <el-form-item :label="$t('联系电话')">
                <el-input v-model="formdata.tel" readonly />
            </el-form-item>
            <el-form-item :label="$t('密码')">
                <el-input show-password v-model="formdata.pass" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item :label="$t('确认密码')">
                <el-input show-password v-model="formdata.passwordconfirm" type="password" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('取消') }}</el-button>
                <el-button type="primary" @click="confirmchange()"> {{ $t('确定') }} </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { computed, ref, onMounted, onBeforeUnmount, getCurrentInstance, watch, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
//@ts-ignore
import { httpSend } from '@/utils/api';
import { useRouter } from 'vue-router';
//@ts-ignore
import { useusrStore } from '@/store';
const loading = ref(false); //加载状态
const userstore = useusrStore() as any;
// 使用 vue-i18n 提供的 useI18n API
const { t, locale } = useI18n();
// 获取当前组件实例
const router = useRouter();
const switchLanguage = (language) => {
    localStorage.setItem('locale', language);
    locale.value = language;
};
const channellist = ref([]);
// 弹窗数据
let formdata: any = reactive({});
const dialogVisible = ref(false);

// 初始化
onMounted(() => {
    loadchannel();
});

//加载组织机构
const loadchannel = async () => {
    const res = await httpSend('loadchannel', {},false);
    if (res && res.data) {
        channellist.value = res.data;
    }
};
//选中组织切换
const handlesetchannel = async (command: any) => {
    if (userstore.userinfo.channelid && userstore.userinfo.channelid != command) {
        const fd = new FormData();
        fd.append('param', JSON.stringify({ channelid: command, id: userstore.userid }));
        const res = await httpSend('Setchannel', fd);
        if (res && res.code && res.code == 1) {
            channellist.value.find((item) => {
                if (item.id == command) {
                    userstore.setuserdetail('channelnm', item.name);
                    userstore.setuserdetail('channelid', item.id);
                }
            });
        }
    }
};
const logout = async (notice = true) => {
    const data = await httpSend('logout', {}, notice);
    userstore.logout();
    localStorage.removeItem('user');
    router.push('/login');
};

const changePassword = () => {
    formdata.id = userstore.userinfo.id;
    formdata.userid = userstore.userinfo.userid;
    formdata.name = userstore.userinfo.name;
    formdata.tel = userstore.userinfo.tel;
    formdata.pass = null;
    formdata.passwordconfirm = null;
    dialogVisible.value = true;
};

const confirmchange = async () => {
    loading.value = true;
    const fd = new FormData();
    fd.append('param', JSON.stringify({ id: userstore.userid, password: formdata.pass, password_confirmation: formdata.passwordconfirm }));
    const res = await httpSend('changePassword', fd);
    if (res && res.code && res.code == 1) {
        dialogVisible.value = false;
        logout(false);
    }
    loading.value = false;
};
</script>
